<template>
    <view>
        <scroll-view  ref="scrollRef" scroll-x class="srcoll-x" :show-scrollbar="false"   :scroll-left="scrollLeftValue"
            scroll-with-animation @scroll="touchSrcoll" @scrolltolower="touchEnd">
            <view class="x-scroll-box">
                <view class="x-scroll-item"  v-for="(item, index) in list"  :key="index">
                    <image class="hw-128 border-grey shadow radius" :src="item.thumb"  mode="scaleToFill" />
                </view>
            </view>
        </scroll-view> 
        <view class="x-scrollbar">
            <view class="x-scrollbar-rate"></view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import {ref, reactive} from "vue"

const systemInfo = uni.getSystemInfoSync()
const screenWidth = systemInfo.screenWidth

const halfScreenWidth = (screenWidth / 2) + 'px';
const scrollRate = ref("0%")
const scrollRef = ref()
const scrollLeftValue = ref(0)

const list = reactive<any>([
        { id: 1, price: '230.5', thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'}, 
        { id: 2,price: '74.1', thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'}, 
        { id: 3,price: '8457', thumb: 'https://cdn.uviewui.com/uview/goods/6.jpg'}, 
        { id: 4,price: '1442', thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg'},
        { id: 5, price: '541', thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'}, 
        { id: 6,price: '234', thumb: 'https://cdn.uviewui.com/uview/goods/3.jpg'},
        { id: 7, price: '562', thumb: 'https://cdn.uviewui.com/uview/goods/4.jpg'}, 
        { id: 8,price: '251.5', thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'}
])


function touchSrcoll(event: any){
    let {scrollLeft, scrollWidth} = event.detail;
    scrollLeftValue.value = scrollLeft;
    let maxScrollWidth = scrollWidth - screenWidth;
    let rate = Math.floor(scrollLeft  * 100 / maxScrollWidth)
    scrollRate.value = rate + "%"
}


function touchEnd(){
    /*
    console.log(scrollRef.value)
    scrollLeftValue.value = 0
    scrollRate.value = "0%"
    */
}

</script>
<style lang="scss" scoped>
.srcoll-x{
    width: 100%;
    height: 128px;
}

.x-scroll-box{
  white-space: nowrap;
}

.x-scroll-item{
    display: inline-block;

}

.x-scroll-item:first-child, .x-scroll-item:last-child{
  margin-left: 7px;
}

.x-scroll-item:nth-child(2n){
    margin-left: 7px;
    margin-right: 7px;
}

.x-scrollbar{
    height: 5px;
    width: v-bind(halfScreenWidth);
    background-color: #dee3e7;
    // border: 1px solid #dee3e7;
    border-radius: 5px;
    margin: 15px auto;
}

.x-scrollbar-rate{
     height: 100%;
     width: v-bind(scrollRate);
     border-radius: 5px;
     background-color: #0081ff;
}

</style>